<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #0ff;
        }

        div {
            position: absolute;
            left: calc(50% - 350px);
            top: 100px;
            width: 700px;
            height: 100px;
            font-size: 80px;

            text-shadow: 10px 10px 3px #000,
                         -10px -10px 3px #fcc;
            /* 没有内阴影一说 */
            /* 只有这四个值可以设置，xoffset yoffset blur 阴影颜色 */
            color: #ddd;



            text-shadow: 1px 1px #000,
                        -1px -1px #fff;
            /* 浮雕效果，左上像有光，右下像有影子，阴影设置不能离太远 */


            text-shadow: 1px 1px #fff,
                        -1px -1px #000;
            /* 镂刻效果，把白色去掉比较好 */
            text-shadow: -1px -1px #000;
            /* 镂刻效果，想想左上有光 */
        }






    </style>
</head>
<body>
    <div>TEXT SHADOW</div>
</body>
</html>